// 导入Lucide React图标库中的图标组件
import { ChevronRight, Settings } from 'lucide-react';
// 导入React Router的useNavigate钩子，用于页面导航
import { useNavigate } from 'react-router-dom';
// 导入React的useState钩子，用于管理组件状态
import { useState } from 'react';
// 导入Redux store的自定义hook，用于获取状态
import { useAppSelector } from '../store/hooks';
// 导入协议确认弹窗组件
import AgreementModal from '../components/AgreementModal';

/**
 * 订单页面组件 - 服务功能导航中心
 * 
 * 功能特性：
 * - 服务功能宫格导航
 * - 用户登录状态检查
 * - 协议确认弹窗
 * - 功能菜单导航
 * - 用户信息展示
 * 
 * 主要状态：
 * - isAgreementModalOpen: 协议弹窗显示状态
 * - userInfo: 用户信息（从Redux获取）
 * 
 * 宫格功能：
 * - 在线咨询
 * - 健康档案
 * - 用药指导
 * - 优选订单
 * - 我的医生
 * - 随访计划
 * - 门诊预约
 * - 医院详情
 * - 药品详情
 * - 症状详情
 * 
 * 菜单功能：
 * - 收货地址管理
 * - 我的卡券
 * - 门诊预约
 * - 价格公示
 * - 用户协议
 * - 隐私政策
 * - 意见反馈
 * - 测试随访
 * 
 * 用户状态处理：
 * - 未登录：显示登录按钮和协议确认
 * - 已登录：显示用户信息和功能入口
 * 
 * 导航逻辑：
 * - 根据功能类型跳转到对应页面
 * - 支持登录状态检查和协议确认
 * 
 * @returns {JSX.Element} 订单页面组件
 */
export default function OrdersPage() {
  // 获取导航函数，用于页面跳转
  const navigate = useNavigate();
  // 从Redux store获取用户信息
  const { userInfo } = useAppSelector(state => state.user);
  // 定义协议弹窗的显示状态
  const [isAgreementModalOpen, setIsAgreementModalOpen] = useState(false);

  // 处理设置按钮点击事件
  const handleSettingsClick = () => {
    // 跳转到设置页面
    navigate('/settings');
  };

  // 处理登录按钮点击事件
  const handleLoginClick = () => {
    // 显示协议确认弹窗
    setIsAgreementModalOpen(true);
  };

  // 处理协议弹窗关闭事件
  const handleAgreementClose = () => {
    // 关闭协议弹窗
    setIsAgreementModalOpen(false);
  };

  // 处理协议同意事件
  const handleAgreementAgree = () => {
    // 用户同意协议后，关闭弹窗并跳转到登录页面
    setIsAgreementModalOpen(false);
    navigate('/login');
  };

  // 宫格功能跳转处理函数
  const handleGridItemClick = (type: string) => {
    // 根据功能类型跳转到对应页面
    switch (type) {
              case 'online-consultation':
          navigate('/online-consultation'); // 跳转到在线咨询页面
        break;
      case 'health-records':
        navigate('/health-records'); // 跳转到健康档案页面
        break;
      case 'medication-advice':
        navigate('/medication-advice'); // 跳转到用药指导页面
        break;
      case 'preferred-orders':
        navigate('/preferred-orders'); // 跳转到优选订单页面
        break;
      case 'my-doctor':
        navigate('/my-doctor'); // 跳转到我的医生页面
        break;
      case 'follow-up-plan':
        navigate('/follow-up-plan'); // 跳转到随访计划页面
        break;
      case 'outpatient-appointment':
        navigate('/outpatient-appointment'); // 跳转到门诊预约页面
        break;
      case 'hospital-detail':
        navigate('/hospital-detail'); // 跳转到医院详情页面
        break;
      case 'medicine-detail':
        navigate('/medicine-detail'); // 跳转到药品详情页面
        break;
      case 'symptom-detail':
        navigate('/symptom-detail'); // 跳转到症状详情页面
        break;
      default:
        console.log('未知功能类型:', type); // 记录未知功能类型
        break;
    }
  };

  // 菜单跳转处理函数
  const handleMenuItemClick = (type: string) => {
    // 根据菜单类型跳转到对应页面
    switch (type) {
      case 'shipping-address':
        navigate('/shipping-address'); // 跳转到收货地址页面
        break;
      case 'my-coupons':
        navigate('/my-coupons'); // 跳转到我的卡券页面
        break;
      case 'outpatient-appointment':
        navigate('/outpatient-appointment'); // 跳转到门诊预约页面
        break;
      case 'price-disclosure':
        navigate('/price-disclosure'); // 跳转到价格公示页面
        break;
      case 'feedback':
        navigate('/feedback'); // 跳转到意见反馈页面
        break;
      case 'user-agreement':
        navigate('/user-agreement'); // 跳转到用户协议页面
        break;
      case 'privacy-policy':
        navigate('/privacy-policy'); // 跳转到隐私协议页面
        break;
      default:
        console.log('未知菜单项:', type); // 记录未知菜单项
        break;
    }
  };

  // 返回JSX结构
  return (
    // 主容器，设置最小高度和背景色
    <div className="min-h-full bg-gray-50">
      {/* 顶部导航栏 */}
      <div className="bg-white shadow-sm">
        <div className="px-4 py-3 flex items-center justify-between">
          {/* 页面标题 */}
          <h1 className="text-lg font-semibold text-gray-900">我的</h1>
          {/* 设置按钮 */}
          <button
            onClick={handleSettingsClick}
            className="p-2 hover:bg-gray-100 rounded-full transition-colors"
          >
            <Settings size={20} />
          </button>
        </div>
      </div>

      {/* 用户信息区域 */}
      <div className="bg-white p-4 border-b border-gray-100">
        {/* 根据用户登录状态显示不同内容 */}
        {userInfo && userInfo.isLoggedIn ? (
          // 已登录状态：显示用户信息
          <div className="flex items-center space-x-4">
            {/* 用户头像 */}
            <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center overflow-hidden">
              {userInfo.avatar ? (
                // 如果有头像，显示头像图片
                <img
                  src={userInfo.avatar}
                  alt="用户头像"
                  className="w-full h-full object-cover"
                />
              ) : (
                // 如果没有头像，显示用户名首字母
                <span className="text-2xl font-semibold text-blue-600">
                  {userInfo.name ? userInfo.name.charAt(0) : '用'}
                </span>
              )}
            </div>
            
            {/* 用户信息文本 */}
            <div className="flex-1">
              {/* 用户名 */}
              <h2 className="text-lg font-semibold text-gray-900">
                {userInfo.name || `用户${userInfo.phone?.slice(-4) || ''}`}
              </h2>
              {/* 手机号 */}
              <p className="text-sm text-gray-500">
                {userInfo.phone || '未绑定手机号'}
              </p>
            </div>
            
            {/* 设置按钮 */}
            <button
              onClick={handleSettingsClick}
              className="p-2 hover:bg-gray-100 rounded-full transition-colors"
            >
              <ChevronRight size={20} className="text-gray-400" />
            </button>
          </div>
        ) : (
          // 未登录状态：显示登录提示
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              {/* 默认头像 */}
              <div className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center">
                <span className="text-2xl font-semibold text-gray-500">用</span>
              </div>
              
              {/* 登录提示文本 */}
              <div>
                <h2 className="text-lg font-semibold text-gray-900">未登录</h2>
                <p className="text-sm text-gray-500">点击登录享受更多服务</p>
              </div>
            </div>
            
            {/* 登录按钮 */}
            <button
              onClick={handleLoginClick}
              className="px-6 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors"
            >
              登录
            </button>
          </div>
        )}
      </div>

      {/* 功能宫格区域 */}
      <div className="p-4">
        {/* 4x4网格布局 */}
        <div className="grid grid-cols-4 gap-4">
          {/* 在线咨询功能按钮 */}
          <button
            onClick={() => handleGridItemClick('online-consultation')}
            className="flex flex-col items-center space-y-2 p-4 bg-white rounded-lg hover:bg-gray-50 transition-colors"
          >
            {/* 功能图标 */}
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
              <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
            </div>
            {/* 功能名称 */}
            <span className="text-xs text-gray-700">在线咨询</span>
          </button>

          {/* 健康档案功能按钮 */}
          <button
            onClick={() => handleGridItemClick('health-records')}
            className="flex flex-col items-center space-y-2 p-4 bg-white rounded-lg hover:bg-gray-50 transition-colors"
          >
            {/* 功能图标 */}
            <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
              <span className="text-green-600 text-lg">📋</span>
            </div>
            {/* 功能名称 */}
            <span className="text-xs text-gray-700">健康档案</span>
          </button>

          {/* 用药指导功能按钮 */}
          <button
            onClick={() => handleGridItemClick('medication-advice')}
            className="flex flex-col items-center space-y-2 p-4 bg-white rounded-lg hover:bg-gray-50 transition-colors"
          >
            {/* 功能图标 */}
            <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
              <span className="text-purple-600 text-lg">💊</span>
            </div>
            {/* 功能名称 */}
            <span className="text-xs text-gray-700">用药指导</span>
          </button>

          {/* 优选订单功能按钮 */}
          <button
            onClick={() => handleGridItemClick('preferred-orders')}
            className="flex flex-col items-center space-y-2 p-4 bg-white rounded-lg hover:bg-gray-50 transition-colors"
          >
            {/* 功能图标 */}
            <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
              <span className="text-orange-600 text-lg">⭐</span>
            </div>
            {/* 功能名称 */}
            <span className="text-xs text-gray-700">优选订单</span>
          </button>

          {/* 我的医生功能按钮 */}
          <button
            onClick={() => handleGridItemClick('my-doctor')}
            className="flex flex-col items-center space-y-2 p-4 bg-white rounded-lg hover:bg-gray-50 transition-colors"
          >
            {/* 功能图标 */}
            <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
              <span className="text-red-600 text-lg">👨‍⚕️</span>
            </div>
            {/* 功能名称 */}
            <span className="text-xs text-gray-700">我的医生</span>
          </button>

          {/* 随访计划功能按钮 */}
          <button
            onClick={() => handleGridItemClick('follow-up-plan')}
            className="flex flex-col items-center space-y-2 p-4 bg-white rounded-lg hover:bg-gray-50 transition-colors"
          >
            {/* 功能图标 */}
            <div className="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center">
              <span className="text-indigo-600 text-lg">📅</span>
            </div>
            {/* 功能名称 */}
            <span className="text-xs text-gray-700">随访计划</span>
          </button>

          {/* 门诊预约功能按钮 */}
          <button
            onClick={() => handleGridItemClick('outpatient-appointment')}
            className="flex flex-col items-center space-y-2 p-4 bg-white rounded-lg hover:bg-gray-50 transition-colors"
          >
            {/* 功能图标 */}
            <div className="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center">
              <span className="text-teal-600 text-lg">🏥</span>
            </div>
            {/* 功能名称 */}
            <span className="text-xs text-gray-700">门诊预约</span>
          </button>

          {/* 医院详情功能按钮 */}
          <button
            onClick={() => handleGridItemClick('hospital-detail')}
            className="flex flex-col items-center space-y-2 p-4 bg-white rounded-lg hover:bg-gray-50 transition-colors"
          >
            {/* 功能图标 */}
            <div className="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center">
              <span className="text-pink-600 text-lg">🏢</span>
            </div>
            {/* 功能名称 */}
            <span className="text-xs text-gray-700">医院详情</span>
          </button>

          {/* 药品详情功能按钮 */}
          <button
            onClick={() => handleGridItemClick('medicine-detail')}
            className="flex flex-col items-center space-y-2 p-4 bg-white rounded-lg hover:bg-gray-50 transition-colors"
          >
            {/* 功能图标 */}
            <div className="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
              <span className="text-yellow-600 text-lg">💊</span>
            </div>
            {/* 功能名称 */}
            <span className="text-xs text-gray-700">药品详情</span>
          </button>

          {/* 症状详情功能按钮 */}
          <button
            onClick={() => handleGridItemClick('symptom-detail')}
            className="flex flex-col items-center space-y-2 p-4 bg-white rounded-lg hover:bg-gray-50 transition-colors"
          >
            {/* 功能图标 */}
            <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
              <span className="text-gray-600 text-lg">🤒</span>
            </div>
            {/* 功能名称 */}
            <span className="text-xs text-gray-700">症状详情</span>
          </button>
        </div>
      </div>

      {/* 菜单列表区域 */}
      <div className="px-4 pb-6">
        {/* 菜单容器 */}
        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
          {/* 遍历渲染菜单项 */}
          {[
            { label: '收货地址', icon: '📍', type: 'shipping-address' },
            { label: '我的卡券', icon: '🎫', type: 'my-coupons' },
            { label: '门诊预约', icon: '📅', type: 'outpatient-appointment' },
            { label: '价格公示', icon: '💰', type: 'price-disclosure' },
            { label: '意见反馈', icon: '💬', type: 'feedback' },
            { label: '用户协议', icon: '📋', type: 'user-agreement' },
            { label: '隐私协议', icon: '🔒', type: 'privacy-policy' },
          ].map((item, index) => (
            <button
              key={item.type} // 设置唯一key
              onClick={() => handleMenuItemClick(item.type)} // 绑定点击事件
              className={`w-full flex items-center justify-between px-4 py-4 text-left hover:bg-gray-50 transition-colors ${
                index !== 6 ? 'border-b border-gray-100' : '' // 最后一项不显示底部边框
              }`}
            >
              {/* 菜单项左侧内容 */}
              <div className="flex items-center space-x-3">
                {/* 菜单项图标 */}
                <span className="text-lg">{item.icon}</span>
                {/* 菜单项标签 */}
                <span className="text-sm font-medium text-gray-900">{item.label}</span>
              </div>
              {/* 右箭头图标 */}
              <ChevronRight className="w-5 h-5 text-gray-400" />
            </button>
          ))}
        </div>
      </div>

      {/* 协议确认弹窗组件 */}
      <AgreementModal
        isOpen={isAgreementModalOpen} // 控制弹窗显示状态
        onClose={handleAgreementClose} // 关闭弹窗回调
        onAgree={handleAgreementAgree} // 同意协议回调
      />
    </div>
  );
} 